<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>html用户</title>
</head>
<body>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        .wrapper {
            /*overflow: hidden;*/
            min-width: 1024px;
            height: 36px;
            /*background-color: red;*/
        }

        .left {
            width: 100px;
            height: 600px;
            float: left;
            background-color: darkslateblue;
        }
        .right1 {
            width: 200px;
            height: 60px;
            float: right;
            /*background-color: green;*/
        }
        div.left>p {
            width: 33%;
        }
        div.right1>span {
             display: inline-block;

        }
    </style>
    <div class="wrapper">
        <img src="捕获6.PNG" height="36" width="99"/>
        <div class="right1">
            <span><img src="捕获.PNG" height="40" width="40"/></span>
            <span>刘琦</span>
            <span><img src="设置.png" height="16" width="16"/></span>
            <span><img src="关机.png" height="16" width="16"/></span>
        </div>
    </div>
    <div class="left">
        <div style="height: 50px;line-height: 50px">
            <img src="首页.png" height="16" width="16"/>
            <a>首页</a>
        </div>
        <div>
            <p>
                <img src="地址.png" height="16" width="16"/>
                <span>员工档案</span>
            </p><br>
            <p>
                <img src="循环播放_32.png" height="16" width="16"/>
                <span>人事变动</span>
            </p><br>
            <p>
                <img src="文本.png" height="16" width="16"/>
                <span>审批事项</span>
            </p><br>
            <p>
                <img src="设置.png" height="16" width="16"/>
                <span>用户管理</span>
            </p>
        </div>
    </div>
    <style>
        .wrapper1 {
            min-width: 1024px;
        }
        .right2 {
            float: right;
            height: 50px;
            width: 920px;
            /*background-color: pink;*/
        }
        div.right2 div {
            display: inline-block;
            width: 24%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color:yellowgreen;
        }
    </style>
    <div class="wrapper">
        <div class="right2">
            <div>30 人事部</div>
            <div>25 设计部</div>
            <div>20 客服部</div>
            <div>40 销售部</div>
        </div>
    </div>
    <style>
        .wrapper {
             min-width: 1024px;
        }
        .bian {
            border: 1px solid red;
            background-color: white;
            height: 520px;
            width: 920px;
            float: right;
        }
        .row {
            width: 150px;
            height: 50px;
            /*background-color: rosybrown;*/
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }
        .row1 {
            width: 150px;
            height: 50px;
            /*background-color: rosybrown;*/
            display: inline-block;
            text-align: center;
            line-height: 50px;
            float: right;
        }
        .row2 {
            display: inline-block;
            width: 19%;
            text-align: center;
            line-height: 50px;
            /*background-color:rebeccapurple;*/
        }
        .row3 {
            display: inline-block;
            text-align: center;
            width: 85px;
            line-height: 50px;
            /*background-color:rebeccapurple;*/
        }
        .row4{
            display: inline-block;
            text-align: center;
            width: 19%;
            line-height: 50px;
            /*background-color:rebeccapurple;*/
        }

    </style>
    <div class="wrapper">
        <div class="bian">
            <div class="row">最近录入</div>
            <div class="row">未转正</div>
            <div class="row1">
                <button type="submit">新建文档</button>
            </div>
            <hr />
            <div class="row2">姓名</div>
            <div class="row2">部门</div>
            <div class="row2">职位</div>
            <div class="row2">录入时间</div>
            <div class="row2">操作</div>
            <hr />
            <div class="row3"><img src="捕获.PNG" height="50" width="50"/></div>
            <div class="row3">张斌</div>
            <div class="row4">设计部</div>
            <div class="row4">设计师助理</div>
            <div class="row4">2015-08-31</div>
            <div class="row4">详情</div>
            <hr />
        </div>
    </div>

</body>
</html>